<template>
  <div class="main">
    <h2>不使用hooks：</h2>
    <TogglePurple @change-purple="togglePurple" />

    <TextColor :textColor="textColor" @change-text-color="changeTextColor" />

    <CircleProperty :property="size" @change-property="changeSize"> 改变大小2： </CircleProperty>
    <CircleProperty :property="angle" @change-property="changeAngle">
      改变角度2：
    </CircleProperty>

    <Circle
      :circleClass="circleClass"
      :textColor="textColor"
      :circleSize="circleSize"
      :circleAngle="circleAngle"
    />
  </div>
</template>
<script setup>
import TogglePurple from '../components/TogglePurple.vue'
import TextColor from '../components/TextColor.vue'
import Circle from '../components/Circle.vue'
import CircleProperty from '../components/CircleProperty.vue'
import { ref, computed } from 'vue'

// Text
const textColor = ref('')
const changeTextColor = (event) => {
  textColor.value = event.target.value
}

// Toggle purple
const isPurple = ref(false)
const togglePurple = () => {
  isPurple.value = !isPurple.value
}

const circleClass = computed(() => {
  return {
    purple: isPurple.value,
  }
})

// Size
const size = ref(200)
const circleSize = computed(() => {
  return {
    height: `${size.value}px`,
    width: `${size.value}px`,
    lineHeight: `${size.value}px`,
  }
})
const changeSize = (event) => {
  size.value = event.target.value
}

// Angle
const angle = ref(0)
const circleAngle = computed(() => {
  return {
    transform: `rotate(${angle.value}deg)`,
  }
})
const changeAngle = (event) => {
  angle.value = event.target.value
}
</script>

<style scoped>
body {
  font-size: 20px;
  font-family: sans-serif;
}

label {
  margin-bottom: 20px;
  font-size: 20px;
  display: block;
}

input[type='number'] {
  display: block;
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
